<template>
  <PageWrapper contentFullHeight title="配置管理">
    <template #rightFooter>
      <a-button
        type="primary"
        @click="onSubmit"
        :loading="submitLoading"
        v-auth="'AccountConfigPriv.Save'"
      >
        确认
      </a-button>
    </template>

    <a-form ref="formRef" :label-col="labelCol" :wrapper-col="wrapperCol" labelAlign="left">
      <a-skeleton :loading="skeletonLoading" active>
        <a-card
          :key="config.id"
          v-for="config in configs"
          :title="config.name"
          class="w-full"
          style="margin-bottom: 24px"
          :canExpan="false"
        >
          <a-form-item
            v-for="item in config.configs"
            :key="item.id"
            :label="item.name"
            :name="item.id"
          >
            <component :is="controlType(item)" v-model:value="item.value" :config="item" />
          </a-form-item>
        </a-card>
      </a-skeleton>
    </a-form>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref, UnwrapRef } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { getConfig, saveConfig } from '/@/api/system/system';
  import { useMessage } from '/@/hooks/web/useMessage';
  import ControlCheckbox from './control/ControlCheckbox.vue';
  import ControlDate from './control/ControlDate.vue';
  import ControlDateTime from './control/ControlDateTime.vue';
  import ControlNumber from './control/ControlNumber.vue';
  import ControlPassword from './control/ControlPassword.vue';
  import ControlRadio from './control/ControlRadio.vue';
  import ControlSelect from './control/ControlSelect.vue';
  import ControlText from './control/ControlText.vue';
  import ControlTextArea from './control/ControlTextArea.vue';

  import { Card, Form, Skeleton, Switch, InputNumber, Select, Checkbox } from 'ant-design-vue';
  interface FormState {
    configs: any;
    id: string;
    name: string;
  }

  export default defineComponent({
    name: 'Security',
    components: {
      PageWrapper,
      [Card.name]: Card,
      [Form.name]: Form,
      AFormItem: Form.Item,
      [Skeleton.name]: Skeleton,
      [Switch.name]: Switch,
      [InputNumber.name]: InputNumber,
      ASelectOption: Select.Option,
      [Select.name]: Select,
      [Checkbox.name]: Checkbox,
      ACheckboxGroup: Checkbox.Group,
      'control-checkbox': ControlCheckbox,
      'control-data': ControlDate,
      'control-data-time': ControlDateTime,
      'control-number': ControlNumber,
      'control-password': ControlPassword,
      'control-radio': ControlRadio,
      'control-select': ControlSelect,
      'control-text': ControlText,
      'control-text-area': ControlTextArea,
    },
    setup() {
      const { createMessage } = useMessage();
      const formRef = ref();
      let submitLoading = ref(false);
      let skeletonLoading = ref(false);
      let configs: UnwrapRef<Array<FormState>> = reactive([]);

      skeletonLoading.value = true;
      getConfig().then((res) => {
        configs.push(...res);
        skeletonLoading.value = false;
      });

      const controlType = (item) => {
        if (item.controlType === 'Text' && item.dataType === 'Long') {
          return 'control-number';
        }
        switch (item.controlType) {
          case 'Password':
            return 'control-password';
          case 'Radio':
            return 'control-radio';
          case 'Select':
            return 'control-select';
          case 'MultipleSelector':
            return 'control-multiple-select';
          case 'Text':
            return 'control-text';
          case 'TextArea':
            return 'control-text-area';
          case 'Checkbox':
            return 'control-checkbox';
          case 'Date':
            return 'control-date';
          case 'DateTime':
            return 'control-date-time';
          default:
            return '';
        }
      };

      const onSubmit = () => {
        submitLoading.value = true;
        const params = JSON.stringify(configs);
        saveConfig({ data: params })
          .then(() => {
            submitLoading.value = false;
            createMessage.success(`保存成功`);
          })
          .finally(() => {
            submitLoading.value = false;
          });
      };
      return {
        formRef,
        labelCol: { span: 8 },
        wrapperCol: { span: 8 },
        other: '',
        configs,
        submitLoading,
        skeletonLoading,
        controlType,
        onSubmit,
      };
    },
  });
</script>
